<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小卓益智游戏</title>
<style>
  *{margin: 0; padding: 0;}
  #容器{
    width: 512px;
    height: 512px;
    border: 1px solid #000;
    margin: 20px auto;
  }
  .方块{
    width: 60px;
    height: 60px;
    border: 1px solid #000;
    float: left;
    margin: 1px;
  }
</style>
<script>
onload = ()=>{
  let a = [];
  let 容器 = document.createElement('div');
  容器.id = '容器';
  for(let i=0; i<64; i++){
    let 方块 = document.createElement('div');
    方块.className = '方块';
    a.push(方块);
    方块.onclick = ()=>{
      a[i].style.background = a[i].style.background?'':'#f00';
      if(i>7)a[i-8].style.background = a[i-8].style.background?'':'#f00';
      if(i<56)a[i+8].style.background = a[i+8].style.background?'':'#f00';
      if(i%8)a[i-1].style.background = a[i-1].style.background?'':'#f00';
      if(i%8-7)a[i+1].style.background = a[i+1].style.background?'':'#f00';
    };
    容器.appendChild(方块);
  }
  document.body.appendChild(容器);
};
</script>
</head>
<body></body>
</html>